<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>个人信息设置</title>
    <style>
        body {
            background: white;
            font: 14px Arial, 'Microsoft YaHei';
            margin: 0px;
            padding: 0px;
        }

        #container {
            display: flex;
            flex-wrap: wrap;
            width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        #header {
            margin-left: 20px;
        }

        #header p {
            color: blue;
        }

        #header1 {
            color: black;
        }

        #header2 {
            color: #cccccc;
        }

        #formbox {
            margin-left: 120px;
            width: 960px;
            height: 1000px;
            border: 1px solid black;
        }

        #consignerRdSign {
            margin-top: 70px;
            margin-left: 70px;
        }

        .info {
            width: 900px;
            height: 30px;
            font-size: 16px;
            display: flex;
            margin-left: 70px;
            margin-top: 30px;
        }

        .info input {
            font-size: 16px;
            margin-top: 15px;
            width: 220px;
            height: 20px;
            margin-right: 50px;
        }

        .info_name {
            width: 80px;
            padding-right: 50px;
        }

        #formbox_info {
            width: 960px;
            display: flex;
            height: 800px;
        }

        label {
            position: relative;
            top: 14px;
            font-size: 16px;
            color: #B7BABB;
            line-height: 16px;
            padding-right: 20px;
        }

        input[type="radio"] {
            display: none;
        }

        input[type='radio'] + label:before {
            margin-top: -2px;
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 20px;
            border-radius: 100%;
            vertical-align: middle;
            border: 1px solid #E4E4E4;
            background: #FFFFFF;
        }

        input[type='radio']:checked + label:before {
            background-image: url("/static/image/sc9.png");
            background-size: cover;
            /*background: #777777;*/
        }

        #textarea {
            border: 0.5px solid gainsboro;
            background-color: transparent;
            {#/*scrollbar-arrow-color:yellow;#}
            {#scrollbar-base-color:lightsalmon;#}
            {#overflow: hidden;*/#}
            color: #666464;
            resize:none;
            font-size: 15px;
        }

    </style>
</head>
<body>
<div id="container">
    <iframe src="/myapp/main2" width="1200px" height="123.5px" frameborder="0"></iframe>
    <div id="header">
        <p>首页<span id="header1"> > </span><span id="header2">个人信息设置</span></p>
    </div>
    <div id="formbox">
        <form action="/myapp/self/" method="post">
            <div id="formbox_img">

                <img id="consignerRdSign" src="/static/image/sc7.png" width="100px" height="100"
                     onclick="F_Open_dialog('btn_file3')">
                <input AUTOCOMPLETE="off" id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();"/>
                <div style="margin-left: 70px"><p>本地上传: 选择本地图片编辑后上传 (上传头像将会在2个工作日内进行审核，通过后需重新登录显示新头像)。<br><br>
                    <span style="color: gray">支持jpg、gif、png格式图片，上传文件大小不超过5MB，图片尺寸需大于200*200</span></p>
                </div>
            </div>
            <div id="formbox_info">
                <ul>
                    <li class="info">
                        <p class="info_name">昵称：</p>
                        <input AUTOCOMPLETE="off" type="text" id="name" style="border: 0px" value="212131112312"
                               readonly='readonly' onblur="setReadonly()">
                        <div id="">
                            <p style="color: blue;width: 100px" onclick="readWrite();">修改昵称</p>
                        </div>
                    </li>
                    <li class="info">
                        <p class="info_name">书友ID：</p>
                        <input type="text" style="border: 0px" value="书友212131112312" readonly='readonly'>
                    </li>
                    <li class="info">
                        <p class="info_name">性别：</p>
                        <input type="radio" name="sex" value="man" id="man" checked>
                        <label for="man">男</label>
                        <input type="radio" name="sex" value="female" id="female">
                        <label for="female">女</label>
                    </li>
                    <li class="info">
                        <p class="info_name">生日：</p>
                        <input type="date" name="">
                    </li>
                    <li class="info">
                        <p class="info_name">地区：</p>
                        <input list="source" style="width: 120px">
                        <datalist id="source">   
                            <option value="html5">   
                            <option value="css3">   
                            <option value="js">   
                            <option value="jquery">   
                            <option value="node">
                        </datalist>
                        <input list="source" style="width: 120px">
                        <datalist id="source">   
                            <option value="html5">   
                            <option value="css3">   
                            <option value="js">   
                            <option value="jquery">   
                            <option value="node">
                        </datalist>
                    </li>
                    <li class="info">
                        <p class="info_name">简介:</p>
                        <textarea id="textarea" rows="" cols="" style="height: 200px;width: 280px">请开始你的表演
                        </textarea>
                    </li>
                    <li class="info">
                        <input type="submit" value="保存" style="margin-top: 200px;width: 70px;height: 40px;border-radius: 10px;border: 1px solid darkgrey">
                    </li>
                </ul>
            </div>
        </form>
    </div>
</div>
</body>
<script language="JavaScript">
    function setReadonly() {
        //document.getElementById("test").setAttribute("readOnly", true);
        document.getElementById("name").readOnly = true;
        document.getElementById("name").style.border = "0px"
    }

    function readWrite() {
        //document.getElementById("test").setAttribute("readOnly", false);
        document.getElementById("name").readOnly = false;
        document.getElementById("name").style.border = "1px solid black"
    }

    function setRuleContent() {
        var selectValue = $('#_select option:selected').text();//选中select的内容
        //alert("selectValue" + selectValue);

        var inputValue = $("#_input").val(selectValue);//input获得select的内容并显示在输入框中
//alert(inputValue);
    };
</script>
</html>